<template>
  <div id="order">
    <div id="front">
      <div id="prod">
        <img :src="img" alt="" />
        <div id="name">{{ name }}</div>
      </div>
      <div id="description">{{ description }}</div>
    </div>
    <div id="back">
      <div id="sellername">
        <router-link
          :to="{ path: '/userinfo', query: { username: sellername, msg: 1 } }"
          >{{ sellername }}</router-link
        >
      </div>
      <div id="number">{{ number }}</div>
      <div id="money">
        <div id="price">￥{{ price }}</div>
        <div id="total">
          总价￥{{ total }}
          <div id="time">{{ time }}</div>
        </div>
      </div>
      <div class="op" v-if="isBuyer">
        <input
          type="text"
          v-if="Confirmed == 0"
          placeholder="1-10请评分"
          v-model="result"
        />
        <i class="el-button" @click="confirm" v-if="Confirmed == 0">确认订单</i>
        <span v-else>订单已确认</span>
      </div>
      <div class="op" v-else>
        <span v-if="Confirmed == 0">订单未确认</span>
        <span v-else>订单已确认</span>
        <span v-if="Confirmed == 1" style="color: rgb(255, 0, 54)"
          >买家评分：{{ point }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    img: String,
    name: String,
    description: String,
    sellername: String,
    number: "",
    price: "",
    point: "",
    total: "",
    isConfirmed: "",
    time: String,
    oid: "",
    isBuyer: Boolean,
  },
  data() {
    return {
      result: "",
      Confirmed: this.isConfirmed,
    };
  },
  methods: {
    confirm() {
      if (this.result >= 1 && this.result <= 10) {
        this.Confirmed = true;
        //上传订单信息包括point、isConfirmed
        this.$emit("func", this.result, this.oid);
      } else {
        this.$message({
          message: "请输入正确评分！",
          type: "warning",
        });
        return;
      }
    },
  },
};
</script>

<style scoped>
input {
  outline: none;
}

#order {
  display: flex;
  justify-content: space-around;
  border: 1px solid rgb(204, 204, 204);
  border-bottom: 2px solid rgb(204, 204, 204);
  margin: 0 10px;
  padding: 10px;
  margin-bottom: 10px;
}

#prod {
  display: flex;
  justify-content: space-around;
}

#front,
#back {
  display: flex;
  justify-content: space-around;
  width: 50%;
}

img {
  width: 100px;
  height: 100px;
}

#sellername,
#number,
#price,
#total,
.op {
  width: 120px;
  text-align: center;
}

#name,
#description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}

#name {
  width: 150px;
}

#description {
  width: 200px;
}

.op {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.op i {
  font-style: normal;
  font-weight: bold;
  width: 100px;
  margin: 0 auto;
}

#money {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#time {
  font-size: 12px;
}

.el-button {
  background-color: rgb(255, 0, 54);
  color: #fff;
}
</style>